import { Table,Space } from 'antd';
import React from 'react';
import type { ColumnsType } from 'antd/es/table';

interface DataType {
  dimensionValue: string;
  dimension: string;
  periodValue: number;
  changeRate: string;
  impactPercent: string;
}

interface AnalysisTableProps {
  activeType: number | string;
  tableData: DataType[];
}


const tableData: DataType[] = [];

const AnalysisTable: React.FC<AnalysisTableProps> = ({activeType, tableData }) => {
  
const columns: ColumnsType<DataType> = [
  {
    title: '维度值',
    dataIndex: 'dimensionValue',
    key: 'dimensionValue',
  },
  {
    title: '维度',
    dataIndex: 'dimension',
    key: 'dimension',
  },
  {
    title: '本期数据',
    dataIndex: 'periodValue',
    key: 'periodValue',
    render: (text, record) => {
        const value = activeType == 1 ? record.periodPercent : record.periodCompare;
        // 转为数字（去掉%等符号）
        const num = typeof value === 'string' ? parseFloat(value) : Number(value);
        const color = num > 0 ? '#ff4d4f' : num < 0 ? '#00B96B' : '#333';
        const arrow = num > 0 ? '↑' : num < 0 ? '↓' : '';
        return (
          <Space align='center'>
            <div>{text ?? 0}</div>
            <div>
              <span style={{ color }}>
                {value}
                {arrow}
              </span>
            </div>
          </Space>
        );
      }
  },
  {
    title: '对整体变化的影响占比',
    dataIndex: 'impactPercent',
    key: 'impactPercent',
    render: (text) => {
        const num = typeof text === 'string' ? parseFloat(text) : Number(text);
        const color = num > 0 ? '#ff4d4f' : num < 0 ? '#00B96B' : '#333';
        const arrow = num > 0 ? '↑' : num < 0 ? '↓' : '';
        return (
          <span style={{ color }}>
            {text}
            {arrow}
          </span>
        )
    }
  },
];

  return (
    <Table 
      columns={columns} 
      dataSource={tableData}
      pagination={false}
    />
  );
};

export default AnalysisTable;